import React,{FC,useEffect} from 'react'
import { Form,Input } from 'antd'
import { QuestionInputPropsType } from './interface'

const PropComponent: FC<QuestionInputPropsType> = (props:QuestionInputPropsType)=>{
    const { title,placeholder,onChange,disabled } = props
    const [form] = Form.useForm()
    useEffect(()=>{ // 监听 title,placeholder的变化
        form.setFieldsValue({ title,placeholder })
    },[title,placeholder])

    const handleValuesChange =()=>{
        if(onChange){
            onChange(form.getFieldsValue())
        }
    }

    return <Form 
    layout='vertical' 
    initialValues={{ title,placeholder }}  
    form={form}
    disabled={disabled}
    onValuesChange={handleValuesChange}>
        <Form.Item label="标题" name="title" rules={[{required:true, message:"请输入标题"}]}>
            <Input />
        </Form.Item>
        <Form.Item label="placeholder" name="placeholder">
            <Input />
        </Form.Item>
    </Form>
}

export default PropComponent